<script setup lang="ts">
import { ref } from 'vue'
import useStore from '../store'

const { todos } = useStore()
const content = ref('')
const addTodoFn = () => {
  if (!content.value) return alert('不能添加空任务')
  todos.addTodo(content.value)
  content.value = ''
}
</script>

<template>
  <header class="header">
    <h1>todos</h1>
    <input
      v-model.trim="content"
      @keyup.enter="addTodoFn"
      class="new-todo"
      placeholder="What needs to be done?"
      autofocus
    />
  </header>
</template>
